let div = document.querySelectorAll('.wrap ul li>div')
let personal = document.querySelector('.userss')
let ul = document.querySelector('.good ul')
let dataid = sessionStorage.getItem('goodsId')
let username = getCookie('username')

if (username) {
    document.querySelector('.user').style.display = "block";
    document.querySelector('.user').innerHTML = `欢迎${getCookie('username')}来到vivo商城`
}
$('.left span:first-child').click(function () {
    location.href = "./indexs.html"
})
// console.log(num, username, dataid)
function engils() {
    let smallImg = document.querySelector('.imgDiv');
    // console.log(smallImg)
    let smallDiv = document.querySelector('.flong')
    // console.log(smallDiv)
    let bigDiv = document.querySelector('.bigger')
    // console.log(bigDiv)
    let bigImg = document.querySelector('.bigger img')
    // console.log(bigImg)
    smallImg.onmouseover = function () {
        smallDiv.style.display = 'block';
        bigDiv.style.display = 'block';
    }
    smallImg.onmouseout = function () {
        smallDiv.style.display = 'none';
        bigDiv.style.display = 'none';
    }
    let div = smallImg.offsetLeft
    let div2 = smallImg.offsetTop + 130
    // console.log(div,div2)

    smallImg.onmousemove = function (e) {
        var e = e || window.event;
        // console.log(e.clientX,e.clientY);
        var x = e.pageX - div;
        var y = e.pageY - div2;
        // console.log(x,y)
        // 对移动范围进行判断
        if (x >= 208) {
            x = 208;
        }
        if (x <= 30) {
            x = 30;
        }
        if (y >= 286) {
            y = 286;
        }
        if (y <= 30) {
            y = 30;
        }

        // 小div移动距离
        smallDiv.style.left = x - 30 + 'px';
        smallDiv.style.top = y - 30 + 'px';

        // 大图移动距离
        bigImg.style.left = -3 * x + 90 + 'px';
        bigImg.style.top = -3 * y + 90 + 'px';
    }
}


////////////////////////////////////////////
/////////////////////////////////////////////
// console.log(dataid)
detail();
async function detail() {
    let res4 = await pAjax({
        url: './severs/detail.php',
        data: {
            id: dataid
        },
        dataType: 'json',
    })

    let data4 = res4.data;
    // console.log(data4)
    let str4 = '';
    let str5;
    let str6;
    let str7;
    let str8;
    data4.forEach(element => {
        str4 += `<div class="imgDiv"> <div class="flong"></div><img src="${element.imgpath.split('==========')[0]}" alt="" data-stock="${element.stock}"></div>`;
        str5 = element.name
        str6 = element.introduce.split('==')[1]
        str7 = element.price
        str8 = element.introduce.split('==')[0]
        // console.log(element.imgpath.split('==========')[0])
        document.querySelector('.bigger').innerHTML = `<img src="${element.imgpath.split('==========')[0]}" alt="">`;
    });
    document.querySelector('.home').innerHTML = str4;
    document.querySelector('.gou').innerHTML = str5;
    document.querySelector('.wenzi').innerHTML = str6;
    document.querySelector('.prices').innerHTML = `￥${str7}`;
    document.querySelector('.xing').innerHTML = `型号:${str8}`;
    engils();
    // console.log(document.querySelector('.bigger'))

}
////////////////////////////////////////
//    console.log(div)
// 给li鼠标移入移出事件
$('.daohan .kou').hover(function (e) {
    // 鼠标移入。下拉显示
    let puts = e.target.getAttribute('index')
    // console.log(puts);
    $(this).parents().find('.wrap').stop().slideDown();
    // if (e.target.getAttribute('index') == 1) {
    switch (puts) {
        case '1':
            getLists();
            async function getLists() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            break; //停止执行，跳出switch
        case '2':
            getListsd();
            async function getListsd() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 12
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("VIP会员");
            break; //停止执行，跳出switch
        case '3':
            getListsdl();
            async function getListsdl() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '4':
            getListsdk();
            async function getListsdk() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 12
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '5':
            getListsdb();
            async function getListsdb() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '6':
            getListsdm();
            async function getListsdm() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 12
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '7':
            getListsdp();
            async function getListsdp() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch

        default: //上述条件都不满足时，默认执行的代码
            console.log("游客");
    }
    // }

}, function () {
    // console.log("无敌1")
    $(this).parents().find('.wrap').stop().slideUp();
})
$('.wrap').hover(function () {
    $(this).parents().find('.wrap').stop().slideDown();
}, function () {
    $(this).parents().find('.wrap').stop().slideUp();

})
personal.onclick = function () {
    delCookie('username')
    location.href = "./login.html"
}


$('.jian').click(function () {
    $(this).next().next().attr('disabled', false)
    let val = $(this).next().val() - 0;
    if (val == 1) {
        $(this).next().val(1)
        $(this).attr('disabled', true);
    } else {
        $(this).attr('disabled', false)
        $(this).next().val(--val)
    }
})
$('.add').click(function () {
    // console.log(2)
    $(this).prev().prev().attr('disabled', false)
    let val = $(this).prev().val() - 0;
    let stock = $('.home img')[0].dataset.stock - 0;
    if (val == stock) {
        $(this).prev().val(stock)
        $(this).attr('disabled', true);
    } else {
        // $(this).attr('disabled',false);
        $(this).prev().val(++val)
        // console.log(val)
    }
})
$('.one').click(function () {
    if (username) {
        document.querySelector('.user').style.display = "block";
        document.querySelector('.user').innerHTML = `欢迎${getCookie('username')}来到vivo商城`
    } else {
        var msgindex = layer.msg("请先登录", {
            time: 1000
        });
        location.href = "./login.html"
    }
    let locadata = localStorage.getItem('data')
    let val = $('.sum').val()
    if (!locadata) {
        let obj = {
            goodsid: dataid,
            sum: val,
            name: username,

        };
        localStorage.setItem('data', JSON.stringify([obj]))
        layer.msg('加入购物车成功');
    } else {
        let kou = JSON.parse(locadata)
        let res = kou.findIndex(v => v.name == username && v.goodsid == dataid);
        if (res != -1) {
            //证明用户之前就有数据
            let cart = kou.find(v => v.name == username && v.goodsid == dataid);
            let odd = parseInt(cart.sum) + parseInt(val)

            let daset = $('.home img')[0].dataset.stock - 0
            if (odd > daset) {
                cart.sum = daset
                localStorage.setItem('data', JSON.stringify(kou));
                layer.msg(`之前加入过购物车，且超过库存量,购物车加入了最大数量${daset}`)
            } else {
                cart.sum = odd
                localStorage.setItem('data', JSON.stringify(kou));
                layer.msg('加入购物车成功')
            }


        } else {
            kou.push({
                goodsid: dataid,
                sum: val,
                name: username
            });
            localStorage.setItem('data', JSON.stringify(kou));
            layer.msg('加入购物车成功')
        }

    }
})
$('.two').click(function () {
    location.href = "./shopping.html"
    // console.log(1)
})
//写入购物车数据